<template>
  <el-row class="header" type="flex" justify="space-between" align="middle">
    <!-- 占位盒子，使其el-radio-group居中，search居右 -->
    <el-col :span="4" class="search"><el-input size="mini" /></el-col>
    <!-- 占位盒子，使其el-radio-group居中，search居右 -->
    <el-radio-group v-model="state">
      <el-radio label="0">待办</el-radio>
      <el-radio label="1">已办</el-radio>
    </el-radio-group>
    <el-col :span="4" class="search">
      <el-input
        placeholder="请输入内容"
        v-model="keyword"
        clear="search_input"
        size="mini"
      >
        <i
          slot="suffix"
          class="el-input__icon el-icon-search"
          @click="search"
        ></i>
      </el-input>
    </el-col>
  </el-row>
</template>

<script>

export default {
  name: "HeaderComponent",
  data() {
    return {
      state: "0",
      keyword: "",
    };
  },
  watch: {
    state: {
      immediate: true,
      handler(newState) {
        this.$emit("stateChange", newState);
      },
    },
  },
  methods: {
    search() {
      this.$emit("search", this.keyword);
      this.keyword = ''
    },
  },
};
</script>

<style scoped lang="scss">
.header {
  margin-bottom: 15px;
  padding: 15px;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 10%);
  .search {
    &:first-of-type {
      visibility: hidden;
    }
    .el-input {
    }
  }
}
</style>
